<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery-1.7.2.js"></script>
    <title>注册界面</title>
    <link rel="stylesheet" href="../static/css/Register.css">
</head>
<body>
<div class="login-box">
    <h1>注册</h1>
    <div class="input-box">
        <div class="input-text">
            <span>昵称</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <input type="text" placeholder="昵称(5-12位)" id="nickname" class="input-style">
            <span id="nickspan"></span>
        </div><br><br><br>
        <div class="input-text">
            <span>密码</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <input type="password" placeholder="密码(5-12位的字母和数字)" id="pwd" class="input-style">
            <span id="pwdspan"></span>
        </div><br><br><br>
        <div class="input-text">
            <span>确认密码</span>&nbsp&nbsp
            <input type="password" placeholder="确认密码" id="confirmpwd" class="input-style">
            <span id="conpwdspan"></span>
        </div><br><br><br>
        <div class="input-text">
            <span>邮箱</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <input type="text" placeholder="邮箱" id="mailbox" class="input-style">
            <span class="codestyle"><a id="send_code">点击发送验证码</a></span>&nbsp
            <span id="mailboxspan"></span>
        </div><br><br><br>
        <div class="input-text">
            <span>验证码</span>&nbsp&nbsp&nbsp&nbsp&nbsp
            <input type="text" placeholder="验证码" id="code" class="input-style">&nbsp
            <span id="codespan"></span>
        </div><br><br><br>
        <div class="input-btn" id="btn001">
            <a>提交</a>
        </div>
    </div>
    <div class="input-btn1" >
        <a href="login.html">返回登录界面</a>
    </div>
</div>
<script>
     let interval;
    window.onload=function () {
        //给昵称输入框绑定失去焦点事件
        document.getElementById("nickname").onblur=function () {
            var nickobj=document.getElementById("nickname");
            if(nickobj.value.length!==0)
            {
                var patt=/^.{5,20}$/;
                var nickspanobj=document.getElementById("nickspan");
                if(patt.test(nickobj.value))
                {
                    nickspanobj.innerHTML="<img src='../static/imgs/正确.png' width='18' height='18'>"
                }
                else{
                    nickspanobj.innerHTML="<img src='../static/imgs/错误.png' width='18' height='18'>"
                    alert("昵称必须由5-12位的汉字、数字、字母或下划线组成！");
                }
            }else{
                document.getElementById("nickspan").innerHTML="";
            }
        }
        //给密码输入框绑定失去焦点事件
        document.getElementById("pwd").onblur=function () {
               var pwdobj=document.getElementById("pwd");
               if(pwdobj.value.length!==0) {
                   var patt=/^([a-zA-Z0-9]){5,12}$/;
                   var pwdspanobj=document.getElementById("pwdspan");
                   if(patt.test(pwdobj.value))
                   {
                       pwdspanobj.innerHTML="<img src='../static/imgs/正确.png' width='18' height='18'>"
                   }
                   else{
                       pwdspanobj.innerHTML="<img src='../static/imgs/错误.png' width='18' height='18'>"
                       alert("密码必须由5-12位的字母或数字组成！");
                   }
               }else{
                    document.getElementById("pwdspan").innerHTML="";
               }
        }
        //给确认密码输入框绑定失去焦点事件
        document.getElementById("confirmpwd").onblur=function () {
             var confirm_obj=document.getElementById("confirmpwd");
             var pwdobj=document.getElementById("pwd");
             if(pwdobj.value.length!==0&&confirm_obj.value.length!==0)
             {      confirm_span_obj=document.getElementById("conpwdspan");
                   if(pwdobj.value===confirm_obj.value)
                   {
                         confirm_span_obj.innerHTML="<img src='../static/imgs/正确.png' width='18' height='18'>"
                   }
                   else{
                        confirm_span_obj.innerHTML="<img src='../static/imgs/错误.png' width='18' height='18'>"
                        alert("两次输入密码不一致");
                   }
             }else{
                 document.getElementById("conpwdspan").innerHTML="";
             }
        }
        //给发送验证码绑定点击事件
        document.getElementById("send_code").onclick=function () {
            var mailbox_obj=document.getElementById("mailbox");
            if(mailbox_obj.value.length===0)
            {
                alert("邮箱不能为空！");
            }else{
                  var patt=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                var mailspanobj=document.getElementById("mailboxspan");
                if(patt.test(mailbox_obj.value))
                {
                  check_again()
                }
                else{
                    mailspanobj.innerHTML="<img src='../static/imgs/错误.png' width='18' height='18'>"
                    alert("邮箱格式错误！");
                }
            }
        }
        //注册按钮点击事件
        document.getElementById("btn001").onclick=function () {
             submit();
        }
    }
    //发送验证码的点击事件
    function send() {
        let url='http://localhost:8080/userServlet?action=send_code'
        axios({
            method:'GET',
            url:url,
            params:{
                mailbox:document.getElementById("mailbox").value
            },
        }).then(function (response) {
            console.log(response);
        })
    }
    //注册信息提交
    function submit(){
         let url='http://localhost:8080/userServlet?action=register_check'
        axios({
            message:'GET',
            url:url,
            params: {
                nickname:document.getElementById("nickname").value,
                password:document.getElementById("pwd").value,
                mailbox:document.getElementById("mailbox").value,
                code:document.getElementById("code").value
            }
        }).then(function (response) {
               console.log(response);
               alert(response.data.message);
               if(response.data.code===200) {
                   clear_input();
                   clearInterval(interval);
                   var nickspanobj = document.getElementById("nickspan");
                   nickspanobj.innerHTML = "";
                   var pwdspanobj = document.getElementById("pwdspan");
                   pwdspanobj.innerHTML = "";
                   confirm_span_obj = document.getElementById("conpwdspan");
                   confirm_span_obj.innerHTML = "";
                   var send_code_obj = document.getElementById("send_code");
                   send_code_obj.innerHTML = "点击发送验证码";
               }
        })
    }
    //邮箱查重
    function check_again(){
        let url='http://localhost:8080/userServlet?action=check_mailbox'
        axios({
            method:'GET',
            url:url,
            params:{
                mailbox:document.getElementById("mailbox").value
            },
        }).then(function (response) {
              console.log(response);
              if(response.data.code===200){
                  var mailspanobj=document.getElementById("mailboxspan");
                  mailspanobj.innerHTML = "";
                  var send_code_obj = document.getElementById("send_code");
                  var x = 60;
                  alert("已发送验证码");
                  send();
                  $("#send_code").attr("disabled", true).css("pointer-events", "none");
                   interval = setInterval(function () {
                      send_code_obj.innerHTML = x + "s后重新发送";
                      x--;
                      if (x === -1) {
                          send_code_obj.innerHTML = "点击发送验证码";
                          clearInterval(interval);
                          $("#send_code").attr("disabled", false).css("pointer-events", "auto");
                      }
                  }, 1000);
              }else if(response.data.code===500){
                  alert(response.data.message);
              }

        })
    }
    //注册成功之后清空所有字段
    function clear_input(){
        var inputs=document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++)
        {   if(i!==2)
            inputs[i].value="";
        }
    }
</script>
</body>
</html>